<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="visible"
               v-loading="loading"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="40%">
      <el-form :model="formModel"
               label-position="right"
               ref="formModelRef"
               label-width="150px"
               :rules='formModelRules'>
        <el-form-item label="疾病名称："
                      prop="diseaseName">
          <el-input v-model="formModel.diseaseName"
                    class="w-200"
                    clearable
                    placeholder="请输入疾病名称"></el-input>
        </el-form-item>
        <el-form-item label="疾病知识点："
                      prop="diseaseKnowledge">
          <el-input v-model="formModel.diseaseKnowledge"
                    placeholder="请输入疾病知识点"
                    type="textarea"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="前端排序："
                      prop="sortNum">
          <el-input-number v-model="formModel.sortNum"
                           placeholder="请输入前端排序"
                           :min="0"
                           :controls="false"
                           class="w-200"></el-input-number>
        </el-form-item>
      </el-form>
      <p align="center">
        <el-button @click="modalClose"
                   type="info">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm">保 存</el-button>
      </p>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'diseasesDialog', // 关联病种弹窗
    props: {
      dataObj: {
        type: Object,
        default: {}
      },
      appointmentId: {
        type: Number,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        title: '新增关联病症',
        loading: false,
        formModel: {
          appointmentId: null,
          diseaseName: '', // 疾病名称
          diseaseKnowledge: '', // 疾病知识点
          sortNum: undefined, // 前端排序
        },
        formModelRules: {
          diseaseName: [{ required: true, message: '请输入疾病名称', trigger: 'blur' }],
          diseaseKnowledge: [{ required: true, message: '请输入疾病知识点', trigger: 'blur' }],
          sortNum: [{ required: true, message: '请输入前端排序', trigger: 'blur' }],
        },
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      // 保存
      submitForm () {
        this.$refs.formModelRef.validate(async (valid) => {
          if (valid) {
            // 新增、编辑保存
            const { data: res } = await this.post(this.api.promote.updateDisease, this.formModel);
            if (res.code === '200') {
              this.$message.success('保存成功!');
              this.$parent.getList(); // 调用父件组方法
              this.modalClose();
            }
          }
        })
      },
    },
    created () {
      if (this.dataObj) {
        this.title = '编辑关联病症';
        this.formModel = this.dataObj;
      } else {
        this.formModel.appointmentId = this.appointmentId;
      }
    }

  }
</script>
<style scoped lang="scss">
</style>